<template>
<div class="HomeHeader">
	<!--标题-->
	<img :src="icon" class="title-icon"/><h1 class="title" @click="handlerToGuide">线 上 自 习 室</h1>
	<!--模块跳转-->
	<div class="module-menu" style="display: inline-block;">
		<span class="module-item" @click="handlerToGuide">首页</span>
		<span class="module-item" @click="handlerToQuestionList">在线问答</span>
	</div>
		<!--右上角头像-->
      	<div class="icon"  @click="drawer=true"  style="display: inline-block;">
      		<el-badge :hidden="mailData.length<1" :value="mailData.length">
      			<el-avatar :src="me.icon" icon="el-icon-user-solid"  ></el-avatar>
      		</el-badge>
      	</div>

      	      </el-dropdown>
      	      <!--右 抽屉-->
      	      	<el-drawer
  				:visible.sync="drawer"
  				:direction="direction"
 				 :before-close="handleClose"
 				 size="15%"
 				 custom-class="drawer"
 				 :with-header="false"
 				 >
 				 <div class="drawer-me" >
 				 	<div style="display: inline-block;margin:0 20px;width: 100px;float: left;font-size: 17px;font-weight: bold;color:lightseagreen">{{me.username}}</div>
 				 	<el-avatar :size="180" shape="square" :src="me.icon" icon="el-icon-user-solid"  style="display: inline-block;width: 70px;height: 70px;margin: 17% 0px;"></el-avatar>
 				 </div>
					<!--我的好友-->
 				 	<el-collapse v-model="activeNames">
 				 		<el-collapse-item  class="menu-item" name="1">
 				 			<div slot="title" class="menu-item-title">我的好友</div>
 				 			<div v-for="c in contactData" class="menu-item-data" @click="userInfoVisible=true;ownerId=c.id">
 				 			<div class="menu-item-data-icon"><el-avatar shape="square" :src="c.icon" icon="el-icon-user-solid" :size="60"></el-avatar></div>
 				 			<div class="menu-item-data-username">{{c.username}}</div>
 				 			<div v-if="c.online" style="color:mediumseagreen" class="menu-item-data-status">自习中</div>
 				 			<div v-else style="color:darkgrey">离线</div>
 				 			</div>
 				 		</el-collapse-item>
 				 		<!--好友请求-->
 				 		<el-collapse-item  class="menu-item" name="2"> 
 				 			<div slot="title" class="menu-item-title">
 				 				<el-badge :hidden="requestData.length<1" :value="requestData.length">好友请求</el-badge>
 				 			</div>
 				 			<div v-for="r in requestData" class="menu-item-data">
 				 			<div class="menu-item-data-icon"><el-avatar shape="square" :src="r.icon" icon="el-icon-user-solid" :size="60"></el-avatar></div>
 				 			<div class="menu-item-data-username">{{r.username}}</div>
 				 			<div>
 				 				<img @click="handlerConsentRequest(r.id)" :src="require('@/assets/image/consent.png')" style="width: 30px;height: 30px;cursor: pointer;"/>
 				 				<img @click="handlerDisagreeRequest(r.id)" :src="require('@/assets/image/disagree.png')" style="width: 30px;height: 30px;cursor: pointer;"/>
 				 			</div>
 				 			</div>
 				 		</el-collapse-item>	
 				 		<!--消息提醒-->
 				 		 <el-collapse-item  class="menu-item" name="3"> 
 				 			<div slot="title" class="menu-item-title">
 				 				<el-badge :hidden="mailData.length<1" :value="mailData.length">消息提醒</el-badge>
 				 			</div>
 				 			<div><el-button style="width: 80%;height: 40px;margin: 0 30px;background: limegreen;color:white" v-if="mailData.length>0" @click="handlerClearMail">确定</el-button></div>
 				 			<div v-for="m in mailData" style="height: 60px;margin-top: 5px;text-align: center;">
 				 				<div style="font-size:10px;color:lightslategray;display: block">{{m.created|timeFilter}}</div>
 				 			<div style="font-size:14px;color:lightslategray;display: block;">{{m.content}}</div>
 				 			</div>
 				 		</el-collapse-item>	
 				 	</el-collapse>
						<div @click="userInfoVisible=true;ownerId=me.id" class="menu-option">个人信息</div>
						<div @click="noteListVisible=true" class="menu-option">我的笔记</div>
						<div @click="handlerMineRoom" class="menu-option">我的自习室</div>
						<div @click="handlerLogout" class="menu-option">下线</div>
			</el-drawer>
			
	<!--笔记组件弹窗-->
	<el-dialog :visible.sync="noteListVisible" width="60%" title="笔记" center>
	<NoteList :owner="me"></NoteList>
  </el-dialog>
  <!--用户信息组件-->
	<el-dialog :visible.sync="userInfoVisible" width="20%" title="个人界面" center>
		<UserInfo :ownerId="ownerId"></UserInfo>
	</el-dialog>
</div>


</template>

<script>
	import {mapState} from 'vuex'
	import NoteList from './NoteList'
	import UserInfo from './UserInfo'
	export default{
		name:'HomeHeader',
		data(){
			return {
				noteListVisible:false,
				noteVisible:false,
				userInfoVisible:false,
				/*抽屉*/
				drawer:false,
				/*抽屉组件获取数据定时器*/
				drawerTimer:null,
				ownerId:null,
				activeNames:[],
				direction: 'rtl',//从右往左打打开
				requestData:[],
				contactData:[],
				mailData:[],
				mailTimer:null,
				icon:require('@/assets/image/blue.png'),
			}
		},
		components:{
			NoteList,UserInfo
		},
		computed:{
			...mapState(['me'])
		},
		methods:{
			/*退出登录*/
			handlerLogout(){
				this.$axios({
					method:'POST',
					url:'user/logout',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.removeToken()
							this.$router.replace({
								name:'login'
							})
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						
					}
				)
			},
			/*关闭抽屉*/
			handleClose(){
			  this.drawer=false
			},
			/*删除token*/
			removeToken(){
				localStorage.removeItem("token")
			},
			handlerIconCommand(command){
	
				if(command==="logout"){
					this.handlerLogout()
				}else if(command==="drawer"){
					this.drawer=true;
				}else if(commadn==="toLogin"){
					this.$router.replace({
						name:'login'
					})
				}
			},
			/*获取当前用户信息*/
			getMe(){
/*				this.$axios({
					method:"GET",
					url:"user/me",
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.me=response.data.data

						}else{
							localStorage.removeItem("token")
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)*/
				this.$store.dispatch('me');
			},
			getMail(){
				this.$axios({
					method:'POST',
					url:'mail/receive',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.mailData=response.data.data
						}
					},
					error=>{
						
					}
				)
			},
			/*获取好友请求*/
			getRequest(){
				this.$axios({
					method:'POST',
					url:'/contact/getRequest/',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.requestData=response.data.data
						}else{
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			/*获取所有好友*/
			getContact(){
				this.$axios({
					method:'POST',
					url:'/contact/getAll/',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.contactData=response.data.data
						}else{
							console.log(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			init(){
				this.getMe()
				this.getMail()
			},
			handlerMineRoom(){
				this.$axios({
					method:'POST',
					url:'room/getByUserId',
					headers:{
						authorization:localStorage.getItem("token")
					},
				}).then(
					response=>{
						if(response.data.success){
							this.$router.replace({
								name:'room',
								query:{
									roomId:response.data.data.id
								}
							})
							this.drawer=false
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerConsentRequest(id){
				this.$axios({
					method:'POST',
					url:'contact/consentRequest/',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:id
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success("已同意好友请求")
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerDisagreeRequest(val){
				this.$axios({
					method:'POST',
					url:'contact/disagreeRequest',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:val
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success('已拒绝请求')
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerToGuide(){
				this.$router.replace({
					name:'guide'
				})
			},
			handlerToQuestionList(){
				this.$router.push({
					name:'questionlist'
				})
			},
			handlerClearMail(){
				this.$axios({
					method:'POST',
					url:'mail/clear',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
						this.mailData=[]
						}
					}
				)
			}
			
		},
		watch:{
			'drawer':{
				handler(newVal,oldVal){
					if(newVal){
						this.getMe()
							this.getRequest()
							this.getContact()	
						this.drawerTimer=setInterval(()=>{
							this.getMe()
							this.getRequest()
							this.getContact()	
						},1000)
					}else{
						clearInterval(this.drawerTimer)
					}
				}
			}
		},
		mounted(){
			this.init()
			this.mailTimer=setInterval(()=>{
				this.getMail()
			},2000)
		},
		beforeDestroy(){
			clearInterval(this.drawerTimer)
			clearInterval(this.mailTimer)
		},
		filters:{
			timeFilter(val){
				return val.replace("T"," ")
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.HomeHeader{
		height: 70px;
		width: 100%;
		border:1px solid gray;
		background:  linear-gradient(to right,#1368F7,#409EFF);
		line-height: 70px;
	}
	.icon{
		display: inline-block;
		float:right;
		margin:15px 80px 0 0;
		cursor: pointer;
	}
	.module-menu{
		margin-left: 30%;
		width: 35%;
	}
	.module-item{
		font-size: 23px;
		color:white;
		font-weight: 500;
		width: 23%;
		text-align: center;
		cursor: pointer;
		padding: 5px 0;
		margin: 0 30px;
	}
	.module-item:hover{
		border-bottom: 3px solid ;
	}
	.title-icon{
		width: 60px;
		height: 60px;
		margin: 0 0 10px 180px
	}
	.title{
		margin-left: 10px;
		display: inline-block;
		color:white;
		font-size: 30px;
		font-family: kartika;
		cursor: pointer;
	}
	.drawer{
		background: #EBEEF5;
		color:white;
		text-align: center;
	}
	.drawer-me{
		border:1px solid gray;
		height: 180px;
		text-align: center;
		background: #154371;
		color:white;
		line-height: 180px;
		margin-bottom:30px;
	}
	.menu-item-title{
		text-align: center;
		width: 100%;
	}
	.menu-item-data{
		padding-left: 20px;
		height: 60px;
		width: 100%;
		float: left;
		border-bottom: 1px solid gainsboro;
		border-top: 1px solid gainsboro;
		cursor: pointer;
	}
	.menu-item-data>div{
		height: 100%;
		display: inline-block;
		float:left;
		margin-right: 20px;
		line-height: 60px;
	}
	.menu-item-data-icon{
		border: 2px solid steelblue;
	}
	.menu-item-data-username{
		font-size: 18px;
		color:royalblue
	}
	.menu-option{
		color:#000000;
		height: 50px;
		border-bottom: 1px solid #EBEEF5;
		line-height: 50px;
		margin-right: 20px;
		font-size: 13px;
		cursor: pointer;
		text-align: center;
	}
</style>